@media only screen and ( max-width: 640px )  {
    .header{ margin: 0;}
    .w12{ width: 100%;}

    .wapNavBtn{display:inline-block;line-height: 50px;height:50px;width:50px;font-size: 2rem;position:relative; top: 1rem; right: 1rem; z-index:20;}
    .wapNavBtn span{ display:block; right:0; width:55%; height:2px; top:calc((100% - 50px) / 2);transition: all 0.4s; position: relative; margin:0 auto; background:#0a9fdb;}
    .wapNavBtn span:nth-child(1){animation: outfirst 0.5s; transform: translateY(18px) rotate(0); }
    .wapNavBtn span:nth-child(2){animation: outlast 0.5s; transform: translateY(23px) rotate(0); }
    .wapNavBtn span:nth-child(3){animation: outlast 0.5s; transform: translateY(28px) rotate(0); }

    .wapNavBtn.on{ }
    .wapNavBtn.on span:nth-child(1){transform: translateY(25px) rotate(45deg);}
    .wapNavBtn.on span:nth-child(2){transform: translateX(0) rotate(0); display:none;}
    .wapNavBtn.on span:nth-child(3){transform: translateY(23px) rotate(-45deg);}

    .nav-meun{display: none; margin: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 18; }
    /*nav anim*/
    .nav-meun.in{ display: block;}
    .nav-meun .bg{position:absolute;width:50%;height:50%;background:rgba(0,0,0,.8); -webkit-transition:all ease-in-out 0.25s;transition:all ease-in-out 0.25s;}
    .nav-meun.skin-white .bg{background:rgba(255,255,255,.85)}
    .nav-meun.skin-blue .bg{background:rgba(13,98,190,.8);}
    .nav-meun .bg1{top:0px;left:0px;}
    .nav-meun .bg2{top:0px;right:0px;}
    .nav-meun .bg3{bottom:0px;left:0px;}
    .nav-meun .bg4{bottom:0px;right:0px;}
    .nav-meun.in .bg1{animation:navBgin1 .4s  ease-in-out 0s  both;
        -moz-animation:navBgin1 .4s  ease-in-out 0s  both;
        -webkit-animation:navBgin1 .4s  ease-in-out 0s  both;
        -o-animation:navBgin1 .4s  ease-in-out 0s  both;}
    .nav-meun.in .bg2{animation:navBgin2 .4s  ease-in-out 0s  both;
        -moz-animation:navBgin2 .4s  ease-in-out 0s  both;
        -webkit-animation:navBgin2 .4s  ease-in-out 0s  both;
        -o-animation:navBgin2 .4s  ease-in-out 0s  both;}
    .nav-meun.in .bg3{animation:navBgin3 .4s  ease-in-out 0s  both;
        -moz-animation:navBgin3 .4s  ease-in-out 0s  both;
        -webkit-animation:navBgin3 .4s  ease-in-out 0s  both;
        -o-animation:navBgin3 .4s  ease-in-out 0s  both;}
    .nav-meun.in .bg4{animation:navBgin4 .4s  ease-in-out 0s  both;
        -moz-animation:navBgin4 .4s  ease-in-out 0s  both;
        -webkit-animation:navBgin4 .4s  ease-in-out 0s  both;
        -o-animation:navBgin4 .4s  ease-in-out 0s  both;}
    @keyframes navBgin1{
        0%{ transform:translateX(-100%);}
        100%{ transform:translateX(0);}
    }
    @-moz-keyframes navBgin1{
        0%{ -moz-transform:translateX(-100%);}
        100%{ -moz-transform:translateX(0);}
    }
    @-webkit-keyframes navBgin1 {
        0%{ -webkit-transform:translateX(-100%);}
        100%{ -webkit-transform:translateX(0);}
    }
    @-o-keyframes navBgin1{
        0%{ -o-transform:translateX(-100%);}
        100%{ -o-transform:translateX(0);}
    }

    @keyframes navBgin2{
        0%{ transform:translateY(-100%); }
        100%{ transform:translateY(0);}
    }
    @-moz-keyframes navBgin2{
        0%{ -moz-transform:translateY(-100%);}
        100%{ -moz-transform:translateY(0);}
    }
    @-webkit-keyframes navBgin2 {
        0%{ -webkit-transform:translateY(-100%);}
        100%{ -webkit-transform:translateY(0);}
    }
    @-o-keyframes navBgin2{
        0%{ -o-transform:translateY(-100%);}
        100%{ -o-transform:translateY(0);}
    }

    @keyframes navBgin3{
        0%{ transform:translateY(100%);}
        100%{ transform:translateY(0);}
    }
    @-moz-keyframes navBgin3{
        0%{ -moz-transform:translateY(100%);}
        100%{ -moz-transform:translateY(0);}
    }
    @-webkit-keyframes navBgin3 {
        0%{ -webkit-transform:translateY(100%);}
        100%{ -webkit-transform:translateY(0);}
    }
    @-o-keyframes navBgin3{
        0%{ -o-transform:translateY(100%);}
        100%{ -o-transform:translateY(0);}
    }

    @keyframes navBgin4{
        0%{ transform:translateX(100%);}
        100%{ transform:translateX(0);}
    }
    @-moz-keyframes navBgin4{
        0%{ -moz-transform:translateX(100%);}
        100%{ -moz-transform:translateX(0);}
    }
    @-webkit-keyframes navBgin4 {
        0%{ -webkit-transform:translateX(100%);}
        100%{ -webkit-transform:translateX(0);}
    }
    @-o-keyframes navBgin4{
        0%{ -o-transform:translateX(100%);}
        100%{ -o-transform:translateX(0);}
    }
    .nav-meun.out .bg1{animation:navBgout1 .4s  ease-in-out .4s  both;
        -moz-animation:navBgout1 .4s  ease-in-out .4s  both;
        -webkit-animation:navBgout1 .4s  ease-in-out .4s  both;
        -o-animation:navBgout1 .4s  ease-in-out .4s  both;}
    .nav-meun.out .bg2{animation:navBgout2 .4s  ease-in-out .4s  both;
        -moz-animation:navBgout2 .4s  ease-in-out .4s  both;
        -webkit-animation:navBgout2 .4s  ease-in-out .4s  both;
        -o-animation:navBgout2 .4s  ease-in-out .4s  both;}
    .nav-meun.out .bg3{animation:navBgout3 .4s  ease-in-out .4s  both;
        -moz-animation:navBgout3 .4s  ease-in-out .4s  both;
        -webkit-animation:navBgout3 .4s  ease-in-out .4s  both;
        -o-animation:navBgout3 .4s  ease-in-out .4s  both;}
    .nav-meun.out .bg4{animation:navBgout4 .4s  ease-in-out .4s  both;
        -moz-animation:navBgout4 .4s  ease-in-out .4s  both;
        -webkit-animation:navBgout4 .4s  ease-in-out .4s  both;
        -o-animation:navBgout4 .4s  ease-in-out .4s  both;}
    @keyframes navBgout1{
        100%{ transform:translateX(-100%);}
        0%{ transform:translateX(0);}
    }
    @-moz-keyframes navBgout1{
        100%{ -moz-transform:translateX(-100%);}
        0%{ -moz-transform:translateX(0);}
    }
    @-webkit-keyframes navBgout1 {
        100%{ -webkit-transform:translateX(-100%);}
        0%{ -webkit-transform:translateX(0);}
    }
    @-o-keyframes navBgout1{
        100%{ -o-transform:translateX(-100%);}
        0%{ -o-transform:translateX(0);}
    }

    @keyframes navBgout2{
        100%{ transform:translateY(-100%);}
        0%{ transform:translateY(0);}
    }
    @-moz-keyframes navBgout2{
        100%{ -moz-transform:translateY(-100%);}
        0%{ -moz-transform:translateY(0);}
    }
    @-webkit-keyframes navBgout2 {
        100%{ -webkit-transform:translateY(-100%);}
        0%{ -webkit-transform:translateY(0);}
    }
    @-o-keyframes navBgout2{
        100%{ -o-transform:translateY(-100%);}
        0%{ -o-transform:translateY(0);}
    }

    @keyframes navBgout3{
        100%{ transform:translateY(100%);}
        0%{ transform:translateY(0);}
    }
    @-moz-keyframes navBgout3{
        100%{ -moz-transform:translateY(100%);}
        0%{ -moz-transform:translateY(0);}
    }
    @-webkit-keyframes navBgout3 {
        100%{ -webkit-transform:translateY(100%);}
        0%{ -webkit-transform:translateY(0);}
    }
    @-o-keyframes navBgout3{
        100%{ -o-transform:translateY(100%);}
        0%{ -o-transform:translateY(0);}
    }

    @keyframes navBgout4{
        100%{ transform:translateX(100%);}
        0%{ transform:translateX(0);}
    }
    @-moz-keyframes navBgout4{
        100%{ -moz-transform:translateX(100%);}
        0%{ -moz-transform:translateX(0);}
    }
    @-webkit-keyframes navBgout4 {
        100%{ -webkit-transform:translateX(100%);}
        0%{ -webkit-transform:translateX(0);}
    }
    @-o-keyframes navBgout4{
        100%{ -o-transform:translateX(100%);}
        0%{ -o-transform:translateX(0);}
    }
    .nav-meun.in .nav-tabs{
        animation:navContentIn .4s  ease-in-out .4s  both;
        -moz-animation:navContentIn .4s  ease-in-out .4s  both;
        -webkit-animation:navContentIn .4s  ease-in-out .4s  both;
        -o-animation:navContentIn .4s  ease-in-out .4s  both;
    }
    @keyframes navContentIn{
        0%{ transform:scale(0); opacity:0;}
        80%{ transform:scale(1.1);}
        100%{ transform:scale(1); opacity:1;}
    }
    @-moz-keyframes navContentIn{
        0%{ -moz-transform:scale(0); opacity:0;}
        80%{ -moz-transform:scale(1.1);}
        100%{ -moz-transform:scale(1); opacity:1;}
    }
    @-webkit-keyframes navContentIn {
        0%{ -webkit-transform:scale(0); opacity:0;}
        80%{ -webkit-transform:scale(1.1);}
        100%{ -webkit-transform:scale(1); opacity:1;}
    }
    @-o-keyframes navContentIn{
        0%{ -o-transform:scale(0); opacity:0;}
        80%{ -o-transform:scale(1.1);}
        100%{ -o-transform:scale(1); opacity:1;}
    }
    .nav-meun.out .nav-tabs{
        animation:navContentOut .4s  ease-in-out 0s  both;
        -moz-animation:navContentOut .4s  ease-in-out 0s  both;
        -webkit-animation:navContentOut .4s  ease-in-out 0s  both;
        -o-animation:navContentOut .4s  ease-in-out 0s  both;
    }
    @keyframes navContentOut{
        100%{ transform:scale(0); opacity:0;}
        20%{ transform:scale(1.1);}
        0%{ transform:scale(1); opacity:1;}
    }
    @-moz-keyframes navContentOut{
        100%{ -moz-transform:scale(0); opacity:0;}
        20%{ -moz-transform:scale(1.1);}
        0%{ -moz-transform:scale(1); opacity:1;}
    }
    @-webkit-keyframes navContentOut {
        100%{ -webkit-transform:scale(0); opacity:0;}
        20%{ -webkit-transform:scale(1.1);}
        0%{ -webkit-transform:scale(1); opacity:1;}
    }
    @-o-keyframes navContentOut{
        100%{ -o-transform:scale(0); opacity:0;}
        20%{ -o-transform:scale(1.1);}
        0%{ -o-transform:scale(1); opacity:1;}
    }
    .nav-tabs{position: absolute; width: 280px; height: 420px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; font-size: 16px; }
    .nav-tabs>li{ float: none;margin:1rem 0;}
    .nav-tabs>li a{color: #fff;}
    .nav-tabs>li.active, .nav-tabs>li:hover{ border:none;}
    .nav-tabs .dropdown-menu{ display: none !important;}
    .guide{ text-align: center;}
    .hotline{ float: none;padding:20px 20px 0 60px;}
    .search{margin:1rem auto; float: none; display: inline-block;}
    .search input{width:15rem;}
    .index_title{ width: 90%;margin:2rem auto 0;}
    .t_cn{ font-size: 24px;}
    .t_en span{margin:0 3rem; font-size:20px; padding: 0 20px;}
    .w60{ float: none; width: 100%;}
    .w40{ float: none; width: 100%;}
    .ty1{ text-align: center;}
    .ty1 ul li{  text-align: left; float: left; display: inline-block; width: 47%; margin: 0 1%;}
    .ty1 .more{ margin:1rem auto 0;}
    .f-main{padding:3rem;}
    .content_body{padding: 1.5rem;}

    .content_n{position: relative;margin:1rem; width: auto;}
    .cl{ position: absolute; z-index: 1;}
    .cr{ width:100%; position: relative; z-index: 2;transition:0.25s; }
    .cr.on{transform:translateX(220px);}
    .location{ padding: 20px;background: url("../imgs/f.jpg") 50px 24px no-repeat}
    .location i{margin-right: 3rem; display:inline-block;}
    .location_bg{ display:none;position: absolute; top:0;left:0; width:100%;height:100%;background: #000; opacity: 0.2;}
    .Contact_tt{ padding: 0; margin: 0;}
    .Contact_table{ width: 100%;}
    .Contact_table .td{ padding:5px 12px;}
    .Contact_table .td_l{ width:25%;}
    .Contact_table .input-text{ width:90%;}
    .Contact_table input[name='checkcode']{width: 50%;}
    .ke-container{ width: 100% !important;}
}